import React from "react";
import Workflow from "@/services/workflow";
import {Button, Divider, Select,Layout} from "antd/lib";
import {convertStringToComponent} from "@/components/contract/utils";
import notification from "@/services/notification";
import Templates from "@/services/templates";
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'

//const timer_str = convertComponentToString(df)
const {Sider,Content } = Layout;
// 将转化的组件字符串再转为组件
// const TimerComponent = convertStringToComponent(this.props.templatecontent)
export default class Template extends React.Component {
    state = {
      loading: true,
      templateid: 1,
      templatecontent: "",
      checkmessage: "",//BraftEditor.createEditorState(null),
      oldmessage: "",
      usemessage:"",
      tdata:[
      {
       id: 1,
       code: "空白模板",
       name: "空白模板",
      },
    ],
    loaded: false,
  };
  componentWillMount() {
      this.fetch(this.props.type);
      this.setState({
        templateid: this.props.templateid,
          templatecontent: this.props.templatecontent,
          checkmessage: this.props.checkmessage ,//BraftEditor.createEditorState(this.props.checkmessage),
      });
      let params={
        bill: "contracts",
        billid: this.props.id,
        typeid: 0,
      }
       Workflow.getcheckmessag(params).then(data => {
          this.setState({
            oldmessage: data,
          });
      });
  }
  fetch = (type) => {
    let types="";
    if(type.length>0){
      types=type[type.length-1]
    }
    let param={
      page: 1,
      pagesize: 20,
      code: "",
      name: "",
      type: types,
    }
     Templates.getlist(param).then(data => {
        this.setState({
            loading: false,
            tdata:data.data,
        });
    });
  };
  componentDidMount() {
    　　this.props.onRef(this);
  }
    componentDidUpdate() {
        document.getElementById("goods_detail_contentpizhu").innerHTML = this.state.oldmessage + this.state.checkmessage;
        

    }
    componentWillUnmount() {
      const data=
        {
          checkmessage: this.state.checkmessage,//.toHTML(),
        }
      　　this.props.childchange2(data);
    }
     // 这种方式十分适合父子组件的互动，通常是父组件需要通过某些状态控制子组件渲染亦或销毁...
componentWillReceiveProps(nextProps) {//componentWillReceiveProps方法中第一个参数代表即将传入的新的Props
     this.fetch(nextProps.type);
      this.setState({
        templateid: nextProps.templateid,
        templatecontent: nextProps.templatecontent,
        checkmessage: nextProps.checkmessage,//BraftEditor.createEditorState(nextProps.checkmessage),
      });
}
  //   templateSelect(){
  //      const TimerComponent = convertStringToComponent(this.state.templatecontent)
  //      // let  temp=convertStringToComponent(this.state.templatecontent);
  //       return (<TimerComponent name="SaRa"/>);
  //
  // };
   templateChange = value => {
     let temps="";
      this.state.tdata.some(function(item){
      if(item.id===value) {
        temps = item.template;
        return true;
      }
      });
      // this.state.tdata.forEach(item => {
      //       if (item.id===value) {
      //         temps = item.template;
      //       }
      //     });
    this.setState({
      templateid: value,
      templatecontent: temps
    });
  };

  handleEditorChange = (checkmessage) => {
    this.setState({ checkmessage })
}
submitContent = () => {
  // 在编辑器获得焦点时按下ctrl+s会执行此方法
  // 编辑器内容提交到服务端之前，可直接调用checkmessage.toHTML()来获取HTML格式的内容
  const htmlContent = this.state.checkmessage.toHTML()
  // this.setState({
  //   checkmessage: BraftEditor.createEditorState(htmlContent),
  //   templatecontent: htmlContent,
  // })
}
handleSave=(index) =>{
  let message=this.state.usemessage;
  if(index===1){
    message=this.state.checkmessage+'<pre><code>原文：'+message +'</code></pre>';
  }else if(index===2){
    message=this.state.checkmessage+'<pre>批注：<span style="color:blue">'+message +'<span></pre>';
  }else{
    message=this.state.checkmessage.substring(0,this.state.checkmessage.lastIndexOf("<pre>"));
  }
  this.setState({
    checkmessage: message,
    usemessage:"",
  });
}
    render() {
      let textwidth=document.querySelector('body').offsetWidth;
      let textheight = document.querySelector('body').offsetHeight;
      if(textwidth>600){
        textheight=textheight*0.03;
        textwidth=textwidth*0.27/12;
      }else{
        textheight=5;
        textwidth=50;
      }
      return (
            <div>
                <div id="goods_detail_contentpizhu"/>
                <Button type="primary" onClick={() => this.handleSave(1)}>
                <i className="fa fa-save m-r-5" />
                原文提交
              </Button>
              <Divider type="vertical" />
              <Button type="primary" onClick={() => this.handleSave(2)}>
                <i className="fa fa-save m-r-5" />
                批注提交
              </Button>
              <Divider type="vertical" />
              <Button type="primary" onClick={() => this.handleSave(3)}>
              <i className="fa fa-reply m-r-5" />
                撤销
              </Button>
              <textarea
                rows={textheight} 
                cols={textwidth}
                textAlignVertical="top"
                height="100px"
                value={this.state.usemessage}
                onChange={e => this.setState({usemessage:e.target.value})}
                placeholder="审批意见"
              /> 
        </div>
      );
    }
}